<template>
    <div>
        <div class="jc">
            <span>
                <h2 >类型管理</h2>
            </span>
            <span class="btn">
                <el-button @click="goAdd()" style="margin:auto" size="medium" type="primary">
                    添加
                </el-button>
            </span>
        </div>

        <div class="flex" style="display: flex;">
            <el-table :data="types"  border >
                <el-table-column fixed 
                    prop="id" label="ID" min-width="25%">
                </el-table-column>
                <el-table-column  
                    prop="type" label="类型" min-width="50%">
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="25%">
                    <template slot-scope="scope">
                        <el-button @click="goUpdate(scope.row.id,scope.row.type)" 
                                    type="primary" icon="el-icon-edit" size="mini">
                            修改
                        </el-button>
					</template>
                </el-table-column>
            </el-table>

            <el-dialog title="操作中..." :visible.sync="bshow" width="30%">
                <h2>{{titel}}</h2>
                <hr />
                <el-form :model="bookType">
                    <el-form-item  prop="id" label="类型ID:">
                        <el-input readonly="readonly"  v-model="bookType.id"></el-input>
                    </el-form-item>
                    <el-form-item  prop="type" label="类型名称:">
                        <el-input type="type" v-model="bookType.type"></el-input>
                    </el-form-item>
                    <el-button style="margin-top:20px" @click="bshow=false">返回</el-button>
                    <el-button @click="submit('bookType')">{{titel}}</el-button>
                </el-form>
			</el-dialog>

        </div>
    </div>
</template>
<script>
        export default {
            name: "Type",
            props: [],
            data() {
                return {
                    bshow:false,
                    types: [],
                    titel:'浏览中',
                    bookType:{id:0,type:""},
                    typeRule:{
                        type:[
                            {
                                required: true, 
                                message: '类型不能为空',
                                trigger:'blur'
                            },
                        ]
                    }
                };
            },
            methods: {
                goAdd(){
                    this.titel = "添加",
                    this.bookType.id = 0;
                    this.bookType.type="";
                    this.bshow = true;
                    
                },
                goUpdate(id,type) {
                    this.bookType.id = id;
                    this.bookType.type = type;
                    this.titel = "更新";
                    this.bshow = true;
                    
                },
                submit(formName){
                    var bookType = this.bookType;
                    
                    if(bookType.type=='' || bookType.type==null){
                        this.$message.error('类型名称不能为空');
                        return ;
                    }

                    this.$postX("/api/adm/type/add",bookType).then(
                        function(resp){
                            _this.types = resp.data.data;
                        }
                    )
                }
            },
            mounted() {
                window._this = this;
                this.$get("/api/adm/type/findAll").then(
                    function(resp) {
                        _this.types = resp.data.data;
                    }
                );
            },
        };
</script>
<style scoped="scoped">
    .flex{
        margin-top: 5px;
        margin-left: 5px;
        width: 100%;
        justify-content: space-between;
    } 
    .jc{
        display: flex;
        margin: 0 5px;
        justify-content:space-between;
        border-bottom: 2px solid gray;
    }
    .btn{
        display: flex;
        justify-content: center;
        align-content:center;
    }
    .sub{
        margin-right:5px; 
    }
    .type{
        border-top: 2px solid gray;
        line-height: 45px;
    }
    form{
        margin-left: 10px;
    }
</style>